<template>
    <view>
        <swiper class="rotation-chart" autoplay="true"
                interval="6000"
                duration="1000"
                @change="swiperChange"
                :current="bannerId"
                circular="true">
            <swiper-item v-for="(item,index) in bannerList" :key="index" v-if="bannerList.length>0">
                <img :src="item.img_url" mode="aspectFill" @click="toActivity(item)">
            </swiper-item>
            <!--                <swiper-item>-->
            <!--                    <img src="/static/img/123.jpg" mode="aspectFill">-->
            <!--                </swiper-item>-->
        </swiper>
    </view>
</template>

<script>
    export default {
        name: "bannerSwiper",
        props:{
            bannerList:{
                require: true
            },
            bannerId: {
                require: true
            }
        },
        data(){
            return{

            }
        },
        methods:{
            //轮播图
            swiperChange(e){
                console.log(e)
                if (e.detail.source != ''){
                    this.$emit("update:bannerId", e.detail.current);
                }

                // this.bannerId = e.target.current
            },
            toActivity(val){
                //banner跳转
                let url=val.link_url;
                url=decodeURIComponent(url)
                let pattern=/^\/pages/;

                if(pattern.exec(url)){
                    console.log(999)
                    uni.navigateTo({
                        url:url
                    })
                }else{
                    //跳转webview
                    // uni.navigateTo({url:'/pages/index/webview/webview?url='+url})
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .rotation-chart{
        width: 100vw;
        height: 430rpx;
    }
</style>